<template>
  <div class="question-setting">
    <el-row type="flex" justify="center">
      <el-col :span="22">
        <el-card shadow="hover" style="margin-bottom:8px;">
          <div slot="header" class="clearfix">
            <span style="font-weight:bold;font-size:18px;">作答次数限制</span>
          </div>
          <div>
            <el-radio-group v-model="frequencyLimitType">
              <el-row style="margin-bottom:6px;">
                <el-radio :label="'1'">不限制</el-radio>
              </el-row>
              <el-row style="margin-bottom:6px;">
                <el-radio :label="'2'">浏览器cookie方式</el-radio>
                <template v-if="frequencyLimitType == '2'">
                  <el-input-number v-model="frequencyLimitNum" :min="1" :max="10" controls-position="right" size="mini" />
                </template>
              </el-row>
              <el-row>
                <el-radio :label="'3'">IP地址限制</el-radio>
                <template v-if="frequencyLimitType == '3'">
                  <el-input-number v-model="frequencyLimitNum" :min="1" :max="10" controls-position="right" size="mini" />
                </template>
              </el-row>
            </el-radio-group>
          </div>
        </el-card>
        <el-card shadow="hover" style="margin-bottom:8px;">
          <div slot="header" class="clearfix">
            <span style="font-weight:bold;font-size:18px;">时间限制</span>
          </div>
          <div>
            <el-radio-group v-model="dateLimitType">
              <el-row style="margin-bottom:6px;">
                <el-radio :label="'1'">不限制</el-radio>
              </el-row>
              <el-row style="margin-bottom:6px;">
                <el-radio :label="'2'">时间范围</el-radio>
                <template v-if="dateLimitType == '2'">
                  <el-date-picker
                    v-model="dateLimit"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    size="mini"
                  />
                </template>
              </el-row>
            </el-radio-group>
          </div>
        </el-card>
        <el-card shadow="hover" style="margin-bottom:8px;">
          <div slot="header" class="clearfix">
            <span style="font-weight:bold;font-size:18px;">其他设置</span>
          </div>
          <div>
            <el-checkbox v-model="isPublic">是否公开</el-checkbox>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="height:32px">
      <el-row style="float:right;margin-top:4px;">
        <el-button size="mini" type="success" icon="el-icon-check" circle @click="handleSava" />
        <el-button size="mini" type="danger" icon="el-icon-close" circle @click="handleClose" />
      </el-row>
    </el-row>
  </div>
</template>

<script>
import { updateQuestionSetting } from '@/api/questionnaire'
export default {
  name: 'QuestionSetting',
  props: {
    question: {
      type: Object,
      required: true,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      frequencyLimitType: '',
      frequencyLimitNum: 1,
      dateLimitType: '',
      dateLimit: '',
      isPublic: false
    }
  },
  mounted: function() {
    this.frequencyLimitType = this.question.frequencyLimitType
    this.frequencyLimitNum = this.question.frequencyLimitNum
    this.dateLimitType = this.question.dateLimitType
    this.isPublic = this.question.isPublic === '1'
    if (this.question.dateLimitType === '2') {
      this.dateLimit = []
      this.dateLimit.push(this.question.dateLimitStart)
      this.dateLimit.push(this.question.dateLimitEnd)
    }
  },
  methods: {
    handleSava() {
      // 更新问卷
      this.question.frequencyLimitType = this.frequencyLimitType
      if (this.frequencyLimitType === '2' || this.frequencyLimitType === '3') {
        this.question.frequencyLimitNum = this.frequencyLimitNum
      } else {
        this.question.frequencyLimitNum = 0
      }
      this.question.dateLimitType = this.dateLimitType
      if (this.dateLimitType === '2') {
        this.question.dateLimitStart = this.dateLimit[0]
        this.question.dateLimitEnd = this.dateLimit[1]
      } else {
        this.question.dateLimitStart = undefined
        this.question.dateLimitEnd = undefined
      }
      this.question.isPublic = this.isPublic ? '1' : '0'
      updateQuestionSetting(this.question).then(res => {
        if (res.data) {
          this.$message({
            message: '更新成功',
            type: 'success'
          })
        }
      })
      this.$emit('close')
    },
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>
